<template>
    <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <el-form label-width="80px" :inline="false">
            <el-form-item label="SPU名称">
                {{spuName}}
            </el-form-item>
            <el-form-item label="SKU名称">
                <el-input v-model="skuParams.skuName" placeholder="请输入sku名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input v-model="skuParams.price" placeholder="请输入价格" type="number" clearable></el-input>
            </el-form-item>
            <el-form-item label="重量(千克)">
                <el-input v-model="skuParams.weight" placeholder="请输入重量" type="number" clearable></el-input>
            </el-form-item>
            <el-form-item label="规格描述">
                <el-input v-model="skuParams.skuDesc" placeholder="规格描述" clearable></el-input>
            </el-form-item>
            <!-- 平台属性 -->
            <el-form-item label="平台属性">
                <el-form :inline="true">
                    <el-form-item :label="attr.attrName" v-for="(attr , index) in attrList" :key="attr.id">
                        <el-select v-model="attr.attrIdAndValueId">
                            <el-option :label="item.valueName" :value="`${attr.id}:${item.id}`"
                                v-for="(item,index) in attr.attrValueList" :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <!-- 销售属性 -->
            <el-form-item label="销售属性">
                <el-form :inline="true">
                    <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in SaleAttrList"
                        :key="saleAttr.id">
                        <el-select v-model="saleAttr.saleAttrIdAndValueId">
                            <el-option :label="item.saleAttrValueName" :value="`${saleAttr.id}:${item.id}`"
                                v-for="(item,index) in saleAttr.spuSaleAttrValueList">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片列表">
                <el-table border stripe :data="imgList" ref="tableRef">
                    <el-table-column type="selection" width="80px">
                    </el-table-column>
                    <el-table-column label="图片">
                        <template #="{row , $index}">
                            <img :src="row.imgUrl" style="width: 100px; height: 100px" />
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="imgName">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #="{row , $index}">
                            <el-tag v-if="row.isChecked == 1" type="success" size="default" @click="">默认</el-tag>
                            <el-button v-else type="primary" size="small" @click="changeChecked(row)">设置为默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>
        <el-button type="primary" size="default" @click="save">保存</el-button>
        <el-button @click="emit('changeScene',{scenes:0,flag:''})">取消</el-button>
    </el-card>

</template>

<script setup lang="ts">
import { reqAttrList, reqImgList, reqSpuHasSaleAttr, reqAddSku, } from '@/api/product/spu/spu'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
// 图片列表
let imgList = ref<any>([])
let attrList = ref<any>([])
let SaleAttrList = ref<any>([])
let tableRef = ref()
// spu名称
let spuName = ref()
//收集添加SKU参数
let skuParams = ref({
    //父组件传递过来参数
    category3Id: 0, //三级分类的ID
    spuId: 0, //SPU的ID
    tmId: 0, //spu的品牌的ID

    //v-model收集
    skuName: "", //sku的名字
    price: 0, //sku的价格
    weight: "", //sku的重量
    skuDesc: "", //sku的描述

    skuDefaultImg: "", //默认图片地址
    skuAttrValueList: [
        //平台属性
        // {
        //   attrId: 0, //属性的id
        //   valueId: 0, //属性值的ID
        // },
    ],
    skuSaleAttrValueList: [
        //销售属性
        // {
        //   saleAttrId: 0,
        //   saleAttrValueId: 0,
        // },
    ],
});
const initAddSku = async (c1Id: number | string, c2Id: number | string, sku: any) => {
    spuName.value = sku.spuName
    skuParams.value.category3Id = sku.category3Id
    skuParams.value.spuId = sku.id
    skuParams.value.tmId = sku.tmId
    let a1 = await reqAttrList(c1Id, c2Id, sku.category3Id)
    let a2 = await reqImgList(sku.id)
    let a3 = await reqSpuHasSaleAttr(sku.id)
    // 平台属性
    attrList.value = a1
    // 已有图片
    imgList.value = a2
    // 已有属性
    SaleAttrList.value = a3

    if (imgList.value.length == 0) return
    // 给图片添加ischecked,设置默认第一张为默认
    imgList.value[0].isChecked = 1
    setTimeout(() => {
        tableRef.value.toggleRowSelection(imgList.value[0], true)
        skuParams.value.skuDefaultImg = imgList.value[0].imgUrl
    }, 0)
    for (var i = 0; i < imgList.value.length - 1; i++) {
        if (i > 0) {
            imgList.value[i].isChecked = 0
        }
    }
}
// 设置为默认
const changeChecked = (row: any) => {
    // 将所有的设置为0
    imgList.value.forEach(item => {
        item.isChecked = 0
        tableRef.value.toggleRowSelection(item, false)
    })
    // 点击那个为1
    row.isChecked = 1
    skuParams.value.skuDefaultImg = row.imgUrl
    tableRef.value.toggleRowSelection(row, true)
}

// 保存按钮
const save =async () => {
    // 收集参数
// 收集平台属性
skuParams.value.skuAttrValueList=attrList.value.reduce((prve,next)=>{
    if (next.attrIdAndValueId) {
            const [attrId, valueId] = next.attrIdAndValueId.split(':')
            prve.push({ attrId, valueId })
        }
        return prve
},[])
// 属性
skuParams.value.skuSaleAttrValueList = SaleAttrList.value.reduce((pver, next) => {
        if (next.saleAttrIdAndValueId) {
            const [saleAttrId, saleAttrValueId] = next.saleAttrIdAndValueId.split(':')
            pver.push({ saleAttrId, saleAttrValueId })
        }
        return pver;
    }, [])
    try {
        await reqAddSku(skuParams.value)
        ElMessage({
            type: "success",
            message: "修改成功",
        });
        emit('changeScene', { scenes: 0, flag: '' })
    } catch (error) {
        ElMessage({
            type: "error",
            message: "修改失败",
        });
    }
}
//触发自定义事件
let emit = defineEmits(["changeScene"]);
//对外暴露方法
defineExpose({
    initAddSku
});
</script>

<style scoped>

</style>